<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">新增</block>
			</cu-custom>

			<view class="formbox">
				<view class="border">
					<uni-forms ref="form" :modelValue="formData" :rules="rules">
						<uni-forms-item label="场所名称" name="placeName">
							<view class="biaoxing">*</view>
							<input class="input" v-model="formData.placeName" type=text placeholder="请输入场所名称" />
						</uni-forms-item>
						<uni-forms-item label="所属地区" name="community">
							<view class="biaoxing">*</view>
							<uni-data-picker :border="false" v-model="formData.community" :localdata="queryTreeList"
								:map="{text:'departName',value:'id'}" popup-title="请选择类型"></uni-data-picker>
						</uni-forms-item>
						<!-- <uni-forms-item label="经纬度" name="latitude">
							<input @click="openmap" class="input" v-model="formData.lon" type=text placeholder="纬度" />
							<input @click="openmap" class="input" v-model="formData.lat" type=text placeholder="经度" />
							<button></button>
						</uni-forms-item> -->
						
						<uni-forms-item label="详细地址" name="address">
							<view class="biaoxing">*</view>
							<input class="input" v-model="formData.address" type=text placeholder="请输入详细地址" />
							<view  @click="openmap" class="icon-ditu-dibiao"></view>
						</uni-forms-item>
						<uni-forms-item label="网格号" name="grid">
							<input class="input" v-model="formData.grid" type=text placeholder="请输入网格号" />
							
						</uni-forms-item>
						<uni-forms-item label="使用面积" name="usableArea">
							<input class="input" v-model="formData.usableArea" type="text" placeholder="请输入使用面积" />
							<view class="posit">m²</view>
						</uni-forms-item>
						<uni-forms-item label="建筑面积" name="buildingArea">
							<input class="input" v-model="formData.buildingArea" type="text" placeholder="请输入建筑面积" />
							<view class="posit">m²</view>
						</uni-forms-item>
						<uni-forms-item label="建筑高度" name="buildingHeight">
							<input class="input" v-model="formData.buildingHeight" type="text" placeholder="请输入建筑高度" />
							<view class="posit">m</view>
						</uni-forms-item>
						<uni-forms-item label="使用楼层" name="floor">
							<input class="input" v-model="formData.floor" type="text" placeholder="例1:1-3、6,例2:1、3、6" />
							<view class="posit">层</view>
						</uni-forms-item>
						<uni-forms-item label="行业类别" name="industryCategory">
							<uni-data-picker :border="false" v-model="formData.industryCategory"
								:localdata="categoryList" popup-title="请行业类别"></uni-data-picker>
						</uni-forms-item>
						<uni-forms-item label="负责人" name="principalName">
							<view class="biaoxing">*</view>
							<input class="input" v-model="formData.principalName" type=text placeholder="请输入负责人" />
						</uni-forms-item>
						<uni-forms-item label="联系电话" name="principalPhone">
							<view class="biaoxing">*</view>
							<input class="input" v-model="formData.principalPhone" type="number" placeholder="请输入联系电话" />
						</uni-forms-item>
						<uni-forms-item label="场所类型" name="placeType">
							<mySelect :disabled="true" v-model="formData.placeType" placeholder="请选择场所类型"
								dictCode="place_type" space></mySelect>

						</uni-forms-item>

					</uni-forms>
					<view class="padding flex flex-direction">
						<button class="cu-btn bg-blue lg" @click="submit">确认新增</button>
					</view>
				</view>


			</view>
		</scroll-view>
	</view>

</template>

<script>
	import amap from "@/common/js-sdk/js-amap/amap-wx.js";
	import appSelect from '@/components/my-componets/appSelect.vue'
	import server from '@/api/server.js'
	const plan_type = [{
		text: '日常记录',
		value: '日常记录1'
	}, {
		text: '本周工作',
		value: '本周工作2'
	}, {
		text: '下周计划',
		value: '下周计划3'
	}];

	export default {
		components: {
			appSelect
		},
		data() {
			return {
				mapShow: false,
				categoryList: [],
				queryTreeList: [],
				plan_type,
				modalName: null,
				// 表单数据
				formData: {
					placeName: '',
					community: '',
					grid: '',
					lat: '',
					lon: '',
					addressRecognition: '',
					addressCoding: '',
					usableArea: '',
					buildingArea: '',
					buildingHeight: '',
					floor: '',
					houseAddress: '',
					buildingCode: '',
					address: '',
					industryCategory: '',
					principalName: '',
					principalPhone: '',
					placeType: '',
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请选择社区',
							},
							{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					placeName: {
						rules: [{
							required: true,
							errorMessage: '请输入名称',
						}, ]

					},
					community: {
						rules: [{
							required: true,
							errorMessage: '请输入所属社区',
						}, ]
					},
					latitude: {
						rules: [{
							required: true,
							errorMessage: '请输入纬度/经度',
						}, ]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入详细地址',
						}, ]
					},
					principalName: {
						rules: [{
							required: true,
							errorMessage: '请输入负责人',
						}, ]
					},
					principalPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						}, 
						{
							minLength: 11,
							maxLength: 11,
							errorMessage: '联系电话长度在{maxLength} 个字符',
						}]
					},
				},
				// 获取位置
				amapPlugin: null,
				// 高德开放平台上申请的key
				map_key: '999b1e223a253e477912c010034d50e6',

			}
		},
		onShow() {
			this.formData.lat = this.$store.state.lat
			this.formData.lon = this.$store.state.lon
			this.formData.address = this.$store.state.address
		},
		onLoad(options) {
			//options可以接到index 传过来的值
			this.formData.placeType = options.placeType
			// console.log(this.formData.placeType)
			// // 使用高德SDK
			// this.amapPlugin = new amap.AMapWX({
			//     key: this.map_key
			// });
		},
		mounted() {
			this.getdet()

		},
		methods: {
			//打开地图
			openmap() {
				uni.navigateTo({
					url: '/pages/map/map'
				})
			},
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					this.$http.post("/place/add", this.formData).then(res => {
						console.log(res)
						if (res.data.success) {
							this.$tip.success('新增成功!')
							uni.navigateBack({
								delta: 1
							});
						} else {
							this.$tip.success(res.data.message)
						}

					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			//行业类别
			getdet() {
				server.categoryList().then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.categoryList = res.data.result
					});

				})
				server.queryTreeList().then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.queryTreeList = res.data.result
					});

				})
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/.cu-form-group uni-picker::after {
		content: unset;
	}


	.formbox {
		background: white;
		padding: 10px;

		.border {
			padding: 10px;
			border: 1px solid #dddd;
			border-radius: 20px;
			box-shadow: 1px 1px 13px 0px #ccc;
			margin-bottom: 10px;
		}

		/deep/.is-direction-left {
			border-bottom: 1px solid #ddd;
		}

		/deep/.uni-forms-item__inner {
			padding: 6px 0;

		}

		/deep/.is-input-error-border {
			border: unset !important;
		}

		/deep/.uni-forms-item__label .label-text {
			font-size: 15px;
			color: grey;
		}

		.uni-input-placeholder {
			color: #8799a3;
		}
	}

	.biaoxing {
		position: absolute;
		left: -9px;
		top: 17px;
		font-size: 26px;
		color: red;
	}
	.icon-ditu-dibiao{
		    font-size: 28px;
		    color: #6363ea;
		    float: right;
		    position: absolute;
		    right: 7px;
	}
</style>
